<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Google Visualization API Sample</title>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1', {packages: ['annotatedtimeline']});
    google.setOnLoadCallback(drawVisualization);
    
    function drawVisualization() {
      <% for p in @per_number.sort %>
      	var data = new google.visualization.DataTable();
      	data.addColumn('datetime', 'Date');
      	data.addColumn('number', '# of calls');
      	data.addColumn('string', 'comment');
		<% pairs = p[1][0] %> // // timestamp-calls pair
      	data.addRows(<%= pairs.size  %>); 
      		<% i = 0 %>
      		<% for item in pairs.sort %> // sort is very important :(
  					data.setValue(<%= i %>, 0, new Date(<%= item[0].to_i * 1000 %>));
        			data.setValue(<%= i %>, 1, <%= item[1] %>);
        			<% if item[1] > get_annot(params) %>
        				data.setValue(<%= i %>, 2, '# of calls exceeded <%= get_annot() %>.');
        			<% end %>
					<% i += 1%>
			<% end %>
        var annotatedtimeline = new google.visualization.AnnotatedTimeLine(document.getElementById('<%= p[0] %>'));
		var options = {};
		options['displayAnnotations'] = true;
		options['width'] = '1300px';
		//options['title'] = "todo"
        annotatedtimeline.draw(data, options);
     <% end %>
    }
  </script>
</head>
temp value: <%= @temp %>
<table class="table_main">
<% for p in @per_number.sort%>
<tr>
	<%
		# number => timestamp-calls pair, data_center(s), trunk_group_name(s), ip(s) 
	%>
	<th><%= p[0]%> <%= "(%s)" % p[1][1].join(", ") %></th>
	<th><%= "Trunk Group: %s" % p[1][2].join(", ") %></th>
	<th><%= "IP: %s" % p[1][3].join(", ") %></th>
</tr>
<tr style="width: 1300px; height: 450px;">
	<td colspan="3">
		<div id="<%= p[0] %>" style="width: 1300px; height: 400px;"></div>
	</td>
</tr>
<% end %>
</table>


